<script setup>
const props = defineProps({
    edu: Array,
    job: Array
});

function monthTime(d, delimiter = '.') {
    if (isInvalidDate(d)) {
        return '至今';
    }
    return [d.getFullYear(), d.getMonth() + 1].join(delimiter)
}

function isInvalidDate(d) {
    return d == 'Invalid Date';
}

let aid = 1;
class Resume {
    constructor(
        start,
        end,
    ) {
        this.id = aid++;
        this.start = new Date(start);
        this.end = new Date(end);
        this.description = '';
    }

    // month based
    get monthRange() {
        return [monthTime(this.start), monthTime(this.end)].join(" - ")
    }
}

class EducationResume extends Resume {
    constructor(
        school,
        major,
        degree,
        start,
        end,
    ) {
        super(start, end);
        this.school = school;
        this.major = major;
        this.degree = degree;
    }
}

class JobResume extends Resume {
    constructor(
        company,
        occupation,
        start,
        end,
    ) {
        super(start, end);
        this.company = company;
        this.occupation = occupation;
    }
}

const educations = props.edu ? props.edu
    // [
    //     '东北大学 自动化 本科 2013/9/1 2017/6/1',
    //     '东北大学 控制理论与控制工程 硕士 2017/9/1 2020/1/1',
    // ]
    .map(str => {
        return new EducationResume(...(str.split(" ")))
    }) : [];

const jobs = props.job ? props.job
    // [
    //     '上海寒武纪信息科技有限公司 前端开发 2020/03/15 2023/05/01',
    //     '中国电子科技集团研究所 前端开发 2023/07/10',
    // ]
    .map(str => new JobResume(...(str.split(' ')))) : []
</script>

<template>
    <div class="container" v-if="props.edu">

        <div class="row" v-for="edu in educations" :key="edu.id">
            <div class="school item">{{ edu.school }}</div>
            <div class="degree item">{{ edu.degree }}</div>
            <div class="major item">{{ edu.major }}</div>
            <div class="time item">{{ edu.monthRange }}</div>
        </div>
    </div>

    <div class="container" v-else-if="props.job">
        <div class="row" v-for="job in jobs" :key="job.id">
            <div class="company item">{{ job.company }}</div>
            <div class="occupation item">{{ job.occupation }}</div>
            <div class="time item">{{ job.monthRange }}</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    margin: 16px 0;
}

.row {
    display: flex;
    margin: 8px;

    .item {
        flex: 1 1 20%;
    }

    .school,
    .company {
        font-weight: bold;
    }

    .time,
    .occupation {
        text-align: end;
        font-family: ui-monospace;
    }
}
</style>